<template>
  <ProPanel :groups="groups" :data="data" class="model_form_panel">
    <template #tabs="">
      <tab />
    </template>
  </ProPanel>
</template>

<script lang="ts" setup>
import ProPanel from '@/components/pro-panel/index.vue';
import { useStageStore } from '@/store/stage';
import position from './groups/position';
import scale from './groups/scale';
import rotation from './groups/rotation';
import tabs from './groups/tabs';
import tab from './components/tabs/index.vue';
import { cloneDeep } from 'lodash';

const stageStore = useStageStore();
const groups = computed(() => {
  return [position, rotation, scale(), tabs];
});

const data = ref({
  ...cloneDeep(stageStore.layerData.data),
  scale: stageStore.layerData.data.scale.map((el: any) => el * 100),
  scaleAll: stageStore.layerData.data.scaleAll * 100,
});

watch(
  () => stageStore.layerId,
  () => {
    data.value = {
      ...cloneDeep(stageStore.layerData.data),
      scale: stageStore.layerData.data.scale.map((el: any) => el * 100),
      scaleAll: stageStore.layerData.data.scaleAll * 100,
    };
  }
);

watch(
  () => data,
  (val) => {
    stageStore.layerData.data = {
      ...val.value,
      scaleAll: val.value.scaleAll / 100,
      scale: val.value.scale.map((el: any) => el / 100),
    };
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.model_form_panel {
  &.pro-panel {
    :deep(.el-form-item__label) {
      line-height: 32px;
    }

    :deep(.el-input-number.is-controls-right .el-input-number__decrease) {
      display: none;
    }
    :deep(.el-input-number.is-controls-right .el-input-number__increase) {
      display: none;
    }
  }
}
</style>
